<template>
    <div class="home">
        <el-row :gutter="20" class="flex-card">
            <el-col :span="6">
                <div class="card-item card-item-t card-item-t-active">
                    <div class="title-t">总收入</div>
                    <div class="count-t">
                        <div class="count-l"><span>￥</span><span>28,425.00</span></div>
                        <div class="count-i">
                            <SvgIcons class="line-chart" name="lineChart" />
                        </div>
                    </div>
                    <div class="basis-t">
                        <div class="basis-l">
                            <span>自从上周以来</span>
                            <span class="icon-t"><el-icon><Top /></el-icon></span>
                            <span>20.5%</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-item card-item-t">
                    <div class="title-t">总退款</div>
                    <div class="count-t">
                        <div class="count-l"><span>￥</span><span>768.00</span></div>
                        <div class="count-i">
                            <SvgIcons class="bar-chart" name="barChart" />
                        </div>
                    </div>
                    <div class="basis-t">
                        <div class="basis-l">
                            <span>自从上周以来</span>
                            <span class="icon-t"><el-icon><Bottom /></el-icon></span>
                            <span>20.5%</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-item card-item-t">
                    <div class="title-t">活跃用户（个）</div>
                    <div class="count-t">
                        <div class="count-l"><span>￥</span><span>1126</span></div>
                        <div class="count-i count-circle">
                            <SvgIcons class="users" name="users" />
                        </div>
                    </div>
                    <div class="basis-t">
                        <div class="basis-l">
                            <span>自从上周以来</span>
                            <span class="icon-t"><el-icon><Bottom /></el-icon></span>
                            <span>20.5%</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-item card-item-t">
                    <div class="title-t">订单（个）</div>
                    <div class="count-t">
                        <div class="count-l"><span>￥</span><span>527</span></div>
                        <div class="count-i count-circle">
                            <SvgIcons class="files" name="files" />
                        </div>
                    </div>
                    <div class="basis-t">
                        <div class="basis-l">
                            <span>自从上周以来</span>
                            <span class="icon-t"><el-icon><Bottom /></el-icon></span>
                            <span>20.5%</span>
                        </div>
                        <el-icon><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="flex-card">
            <el-col :span="18">
                <div class="card-item card-item-c">
                    <div class="card-head">
                        <div class="card-title">统计数据<span>（万元）</span></div>
                        <div class="card-bar">
                            <el-date-picker
                                v-model="dateRange"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            />
                        </div>
                    </div>
                    <div class="card-body">
                        <LineCharts :chartObject="chartObj1" />
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card-item card-item-c">
                    <div class="card-head">
                        <div class="card-title">销售渠道<span>2023-05</span></div>
                        <div class="card-bar"></div>
                    </div>
                    <div class="card-body">
                        <DoughnutCharts :chartObject="chartObj2" />
                    </div>
                    
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="flex-card">
            <el-col :span="12">
                <div class="card-item card-item-b">
                    <div class="card-head">
                        <div class="card-title">销售订单排名</div>
                        <div class="card-bar">
                            <el-radio-group v-model="countRadio">
                                <el-radio-button label="本周" value="1" />
                                <el-radio-button label="近三个月" value="2" />
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="card-body">
                        <el-table :data="tableData" max-height="100%">
                            <el-table-column prop="index" label="排名" width="60">
                                <template #default="scope">
                                    <span class="rank">{{ scope.row.index }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="client" label="客户名称"/>
                            <el-table-column prop="compareWith" label="较上周" width="100">
                                <template #default="scope">
                                    <span class="up" v-if="scope.row.compareWith > 0"><el-icon><Top /></el-icon></span>
                                    <span class="down" v-else><el-icon><Bottom /></el-icon></span>
                                    {{ Math.abs(scope.row.compareWith) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="orders" label="订单量"  width="100"/>
                            <el-table-column prop="date" label="合同签订日期"  width="140"/>
                            <el-table-column fixed="right" label="操作" width="80">
                                <template #default>
                                    <el-button link type="primary" size="small">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="card-item card-item-b">
                    <div class="card-head">
                        <div class="card-title">销售订单排名</div>
                        <div class="card-bar">
                            <el-radio-group v-model="countRadio">
                                <el-radio-button label="本周" value="1" />
                                <el-radio-button label="近三个月" value="2" />
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="card-body">
                        <el-table :data="tableData" max-height="100%">
                            <el-table-column prop="index" label="排名" width="60">
                                <template #default="scope">
                                    <span class="rank">{{ scope.row.index }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="client" label="客户名称"/>
                            <el-table-column prop="compareWith" label="较上周" width="100">
                                <template #default="scope">
                                    <span class="up" v-if="scope.row.compareWith > 0"><el-icon><Top /></el-icon></span>
                                    <span class="down" v-else><el-icon><Bottom /></el-icon></span>
                                    {{ Math.abs(scope.row.compareWith) }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="orders" label="订单量"  width="100"/>
                            <el-table-column prop="date" label="合同签订日期"  width="140"/>
                            <el-table-column fixed="right" label="操作" width="80">
                                <template #default>
                                    <el-button link type="primary" size="small">详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
//引入elementPlus图标
import { ArrowRightBold, Top, Bottom } from '@element-plus/icons-vue'

const chartObj1 = reactive({
    legend: ['本月', '上月'],
    legendShow: true,
    xData: ['05-06','05-07','05-08','05-09','05-10','05-11','05-12','05-13','05-14','05-15'],
    series: [
        { name: '本月',type: 'line', data: [24, 45, 43, 35, 76, 100, 86, 42, 68, 80], areaStyle: {color: '#E6ECFA'} },
        { name: '上月',type: 'line', data: [100, 23, 50, 67, 89, 35, 67, 96, 90, 75] }
    ]
});

const chartObj2 = reactive({
    name: '销售渠道',
    legend: ['线上', '门店'],
    legendShow: true,
    data: [
        { name: '线上', value: 70.89 },
        { name: '门店', value: 29.11 }
    ]
});

const dateRange:any = ref([]);
const countRadio = ref('1');
const tableData = [
    {
        index: 1,
        client: '国家电网有限公司',
        compareWith: 1,
        orders: 7059,
        date: '2016-05-03',
    },
    {
        index: 2,
        client: '深圳燃气集团股份有限公司',
        compareWith: -1,
        orders: 6437,
        date: '2016-05-03',
    }
];
</script>
<style lang="scss" scoped>
.home {
    width: 100%;
    height: auto;
    .el-row {
        margin-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        .is-guttered {
            padding-left: 0 !important;
            padding-right: 20px !important;
        }
        .is-guttered:last-child {
            padding-right: 0 !important;
        }
    }
    .el-row:last-child {
        margin-bottom: 0;
    }
}
.flex-card {
    width: 100%;
    height: auto;
    .card-item {
        width: 100%;
        height: auto;
        color: #333;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        .card-head {
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .card-title {
                font-size: 16px;
                font-weight: 600;
                font-family: 'SourceHanSansCNMedium';
                >span {
                    font-size: 12px;
                    color: #b1b3b8;
                    margin-left: 5px;
                }
            }
        }
        .card-body {
            width: 100%;
            height: calc(100% - 40px);
            padding-top: 15px;
        }
    }
    .card-item-t {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 160px;
        padding: 20px;
        .count-t {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 26px;
            .count-i {
                width: auto;
                height: 30px;
            }
        }
        .basis-t {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            > .el-icon {
                color: #666;
            }
            .basis-l {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .icon-t {
                display: flex;
                width: 16px;
                height: 16px;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                color: #3c960f;
                background: #8df085;
                margin: 0 5px;
                .el-icon {
                    width: 10px;
                    height: 10px;
                }
            }
        }
    }
    .card-item-t-active {
        color: #fff;
        background: #0052D9;
        .basis-t {
            > .el-icon {
                color: #fff;
            }
            .icon-t {
                color: #fff;
                background: #2c7dff;
            }
        }
    }
    .card-item-c {
        height: 350px;
    }
    .card-item-b {
        height: 350px;
    }
}
.count-i .line-chart{
    width: 55px;
    height: 30px;
}
.count-i .bar-chart{
    width: 55px;
    height: 30px;
}
.count-i .users{
    width: 30px;
    height: 30px;
}
.count-i .files{
    width: 24px;
    height: 30px;
}
.count-circle {
    width: 50px !important;
    height: 50px !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #F3F3FF;
}
.count-i .line-chart.svg-icons :deep(svg)  {
    width: 55px;
    height: 30px;
    fill: #0052d9;
}
.card-item-t-active .count-i .line-chart.svg-icons :deep(svg)  {
    fill: #fff;
}
.count-i .bar-chart.svg-icons :deep(svg)  {
    width: 55px;
    height: 30px;
    fill: #0052d9;
}
.count-i .users.svg-icons :deep(svg)  {
    width: 30px;
    height: 30px;
    fill: #0052d9;
}
.count-i .files.svg-icons :deep(svg)  {
    width: 26px;
    height: 26px;
    fill: #0052d9;
}
.rank {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #0052D9;
    color: #fff;
    border-radius: 50%;
}
.up, .down {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}
.up {
    color: #e98c01;
    background: #fcca80;
}
.down {
    color: #3c960f;
    background: #8df085;
}
.card-item :deep(.el-radio-button:last-child .el-radio-button__inner),
.card-item :deep(.el-radio-button:first-child .el-radio-button__inner) {
    border-radius: 0;
}
</style>